<script setup lang="ts">
import {onMounted, ref} from "vue"
import {Shard} from "@/views/types/shards.ts";
import ShardCardContent from "@/views/components/ShardCardContent.vue";

const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void
}>();
const props = defineProps<{
  shard:Shard,
  visible:boolean
}>()
const isVisible = ref<boolean>(false);
onMounted(() => {
  isVisible.value = <boolean>props.visible;
})
const close = () => {
  isVisible.value = false;
  emit("update:visible", false);
}
</script>

<template>
  <el-dialog :title="'分片'+'('+props.shard.index+')'" v-model="isVisible" @close="close" width="70%">
    <ShardCardContent :shard="shard" detail/>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="close">关 闭</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>